<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据需求占比</title>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="container" style="max-width:800px;height:400px"></div>
    <script>
        $.getJSON("http://10.2.0.100:8081/pie/cityData", function (result){
            console.log(result)
            data = result.data
             Highcharts.chart('container', {
                chart: {
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: '2020一线城市大数据需求占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    name: '占比',
                    colorByPoint: true,
                    data: data
                }]
             });
        })
    </script>
</body>
</html>